<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="/WEB-INF/tlds/c.tld" prefix="c"%>
<%@ taglib uri="/WEB-INF/tlds/fmt.tld" prefix="fmt"%>
<%@ taglib uri="/WEB-INF/tlds/tiles-jsp.tld" prefix="tiles"%>
<%@ taglib uri="/WEB-INF/tlds/spring-form.tld" prefix="form" %>
<%@ taglib uri="/WEB-INF/tlds/spring.tld" prefix="spring" %>


<c:set var="appCtx" value="${pageContext.request.contextPath}" />
<fmt:setBundle basename="messages"/>

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title><tiles:getAsString name="pageTitle" /></title>
		<tiles:insertAttribute name="common-resources" />
		<script type="text/javascript">

		
		$(function() {
			
			crearFormulario = function() {
				$("body").append($("<form id='miForm' />"));
				return $("#miForm");
			};
			
			$("#mextMonth").click(function(e) {
				e.preventDefault(); 
				var form = crearFormulario();
				form.append($("<input type='hidden' name='accion' value='nextMonth' />"));
				form.append($("<input type='hidden' name='mesActual' value='${verGastosMesActual.code}' />"));
				form.append($("<input type='hidden' name='anioActual' value='${verGastosAnioActual }' />"));
				form.attr({
					  action: '${appCtx}/gastos/ver',
					  method: 'post'
					});
				form.submit();
			});
			
			$("#prevMonth").click(function(e) {
				e.preventDefault();
				var form = crearFormulario();
				form.append($("<input type='hidden' name='accion' value='prevMonth' />"));
				form.append($("<input type='hidden' name='mesActual' value='${verGastosMesActual.code}' />"));
				form.append($("<input type='hidden' name='anioActual' value='${verGastosAnioActual }' />"));
				form.attr({
					  action: '${appCtx}/gastos/ver',
					  method: 'post'
					});
				form.submit();
			});
			
			
			jQuery("#list2").jqGrid({ 
				url:'${appCtx}/gastos/cargarDatos', 
				datatype: "json", 
				colNames:['Fecha','Descripcion', 'Monto', 'Categoría','Subcategoría','Frecuencia','Lugar'], 
				colModel:[
				          //770
					{name:'fecha',index:'fecha', width:75, align:"center", sortable:true}, 
					{
						name: 'descripcion',
						index: 'descripcion',
						width: 100,
						sortable: true,
						cellattr: function(rowId, tv, rawObject, cm, rdata){
							return 'style="white-space: normal;"'
						}
					}, 
					{name:'monto',index:'monto', width:80, align:"right", sortable:true}, 
					{name:'categoria',index:'categoria', width:115, align:"right", sortable:true}, 
					{name:'subcategoria',index:'subcategoria', width:115, align:"right", sortable:true}, 
					{name:'frecuencia',index:'frecuencia', width:80,align:"right", sortable:true}, 
					{name:'lugar',index:'lugar', width:90, align:"right", sortable:true} ], 
				rowNum:20, 
				rowList:[20,40,60], 
				pager: '#pager2', 
				sortname: 'id', 
				viewrecords: true, 
				sortorder: "desc",
				caption:"Gastos",
				jsonReader : {
			          root: "rows",
			          page: "page",
			          total: "total",
			          records: "records",
			          repeatitems: false,
			          cell: "cell",
			          id: "id",
					  subGrid: {
					 	root: "rows",
				        //page: "page",
				        //total: "total",
				        //records: "records",
				        repeatitems: true,
				        cell: "cell"//,
				        //id: "id"
					  }
			      },
				  subGrid: true,
				  subGridUrl: '${appCtx}/gastos/cargarDatos', 
				  subGridModel: [
				          //770
					{name:'fecha',index:'fecha', width:75, align:"center", sortable:true}, 
					{
						name: 'descripcion',
						index: 'descripcion',
						width: 190,
						sortable: true,
						cellattr: function(rowId, tv, rawObject, cm, rdata){
							return 'style="white-space: normal;"'
						}
					}, 
					{name:'monto',index:'monto', width:80, align:"right", sortable:true}, 
					{name:'categoria',index:'categoria', width:115, align:"right", sortable:true}, 
					{name:'subcategoria',index:'subcategoria', width:115, align:"right", sortable:true}, 
					{name:'frecuencia',index:'frecuencia', width:80,align:"right", sortable:true}, 
					{name:'lugar',index:'lugar', width:90, align:"right", sortable:true} ],
			    height: "auto"
			}); 
			jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
			
		});
		</script>
	</head>
	<body>
		<div id="layoutContainer">
			<table id="layout">
				<tr>
					<td colspan="2" id="header">
						<tiles:insertAttribute name="header" />
					</td>
				</tr>
				<tr>
					<td id="strut" colspan="2"></td>
				</tr>
				<tr id="middle">
					<td id="navigation-menu">
						<!-- Menú de opciones a la izquierda -->
						<tiles:insertAttribute name="navigation-menu" />
					</td>
					<td id="content">
						<!-- Contenido de la página -->
						<table width="100%">
							<tr>
								<td style="text-align: right; width: 205px; vertical-align: middle;">
									<img id="prevMonth" src="${appCtx}/resources/images/standard/button next/prev naranja 22x22.png" alt="Mes Anterior"/>
								</td>
								<td style="text-align: center; width: 360px; vertical-align: middle;">
									<h2><label>Gastos del mes de <c:out value="${verGastosMesActual.name}" /> de <c:out value="${verGastosAnioActual }"/></label></h2>
								</td>
								<td style="text-align: left; width: 205px; vertical-align: middle;">
									<img id="mextMonth" src="${appCtx}/resources/images/standard/button next/next naranja 22x22.png" alt="Mes Siguiente"/>
								</td>
							</tr>
						</table>
						<table id="list2"></table>
						<div id="pager2"></div>
						<!-- Fin Contenido de la página -->
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<tiles:insertAttribute name="footer" />
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
